<template>
  <div>
     <div class="top-bar" >
       <!--style="border: 0;background: none"-->
      <mu-appbar title="我的收藏" style="border: 0;background: none">
        <mu-icon-button icon="arrow_back" slot="left" @click="goBack" />
      </mu-appbar>
    </div>
    <div class="wrapper">
      <div class="header"></div>
      <div class="mask"></div>
    </div>
    <div>
      <div class="title">收藏歌曲</div>
      <mu-divider />
      <div class="content">
        <mu-list :value="value" @change="change">
           <div v-for="(item, index) in collectList" @click="playAudio(item)">
              <mu-list-item :disableRipple="true" :title="item.mName" :value="item.mId" :describeText="item.authod">
                <span slot="left" class="indexStyle">{{index + 1}}</span>
              </mu-list-item>
               <mu-divider inset/>
           </div>
         </mu-list>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data () {
      return {
        collectList: [],
        value: 0
      }
    },
    beforeRouteEnter: (to, from, next) => {
      next(vm => {
        vm.getCollect()
      })
    },
    methods: {
      change (val) {
        this.value = val
      },
      goBack () {
        this.$router.go(-1)
      },
      playAudio (item) {
        this.$store.commit('pause')
        const data = qs.stringify({
          mId: item.mId
        })
        this.$http.post('http://hongtaofans.cn/music/music/getmusicpath', data).then((res) => {
          console.log(res.data)
          var url = `http://hongtaofans.cn/music/resources/music/${res.data.musicpath}`
          var audio = {}
          audio.id = item.mId
          audio.singer = item.mName
          audio.albumPic = `http://hongtaofans.cn/music/resources/pic/singer/${res.data.coverpath}`
          audio.name = item.authod
          this.$store.commit('addToList', audio)
          this.$store.commit('openLoading')
          this.$store.commit('setAudio')
          this.$store.commit('setLocation', url)
          // this.$store.dispatch('getSong', audio.id)
        }).catch((error) => {
          console.log('加载单曲信息出错：' + error)
        })
      },
      getCollect () {
        const uId = localStorage.getItem('uId')
        const data = qs.stringify({
          uId: uId
        })
        this.$http.post('http://hongtaofans.cn/music/user/getusercollect', data).then((res) => {
          if (res.data.status === 1) {
            console.log(res.data)
            this.collectList = res.data.result
          } else {
            console.log('获取收藏列表出错')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
@import "../assets/theme.less";
  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    text-align: left;
  }
  .wrapper {
    position: relative;
    width: 100%;
    height: 10rem;
  }
  .header {
    position: absolute;
    width: 100%;
    height: 10rem;
    filter: blur(5px);
    background-image: url(http://imgs.aixifan.com/content/2016_07_27/1469600100.jpg);
    background-size: cover;

  }
  .mask {
    position: absolute;
    width: 100%;
    height: 10rem;
    z-index: 10;
    background: rgba(0,0,0,.35);
  }
  .title {
    margin: .5rem 0 .3rem 0.3rem;
    padding-left: .2rem;
    text-align: left;
    border-left: .15rem solid @primaryColor;
  }
  .indexStyle {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bolder;
  }
</style>
